<template>
    <div>
        <ul>
            <li>{{ msg }}</li>
            <li @click="fn()" >{{ hi }}</li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<script>
export default {
    // 还是支持vue2的写法
    data(){
      return {
        msg:'hello world'
      }
    }, 
    beforeCreate(){
        console.log('vue2-beforeCreate执行',this)
    },
    setup () {
        console.log('setup函数执行了',this)
        // vue3代码都写到这里
        // 定义变量hi不是响应式的
        let hi = 'hi setup vue3'

        const fn=()=>{
            hi=100
            console.log(123)
        }
        // 必须返回定义变量或函数,模板html才能获取使用
        return { hi,fn }
    }
}
</script>

<style scoped>

</style>